<template>
  <el-row>
    <el-col :span="24">
      <el-button icon="el-icon-edit" @click="handlecreate">
        {{ $t('table.add') }}
      </el-button>
      <div class="top" style="display: flex">
        <p style="flex: 1; border-left: 2px solid blue; display: flex">&nbsp;&nbsp; &nbsp;spark引擎</p>
        <!-- <el-button type="primary"> <img style="width: 10px;" src="../../../../public/icon/返回.png" alt="">
                    返回计算引擎列表</el-button> -->
      </div>
      <div class="buttom">
        <el-table :data="data" style="width: 100%">
          <el-table-column prop="nodeName" label="节点"> </el-table-column>
          <el-table-column label="IP地址">
            <template slot-scope="{ row }">
              {{ row.nodeIp + ':' + row.nodePort }}
            </template>
          </el-table-column>
          <el-table-column prop="nodeStatus" label="状态"> </el-table-column>
          <el-table-column prop="description" label="说明"> </el-table-column>
          <el-table-column label="操作" align="center" min-width="230" class-name="small-padding fixed-width" fixed="right">
            <template slot-scope="{ row }">
              <el-button v-permission="['standardsystem:ModelSpecification:update']" type="text" size="small" icon="el-icon-edit" @click="handleUpdate(row)">
                {{ $t('table.edit') }}
              </el-button>
              <el-button v-permission="['standardsystem:ModelSpecification:delete']" type="text" size="small" icon="el-icon-delete" class="delete-text-btn" @click="handleDelete(row)">
                {{ $t('table.delete') }}
              </el-button></template
            >
          </el-table-column>
        </el-table>
      </div>
    </el-col>
    <el-col :span="24">                                                         
      <engineecharts :props="echartsObj" v-if="echartsObj.length > 0"></engineecharts>
    </el-col>
    <lookview v-if="isbool" ref="lookviewRef" @offdialogVisible="offdialogVisible" />
  </el-row>
</template>
<script>
import { getsparkList, sparkNodeList } from '@/api/resourceManagement/index'
import { getdelete } from '@/api/resourceManagement/lookview.js'

import engineecharts from './engineecharts'
import lookview from './lookview'
export default {
  components: {
    engineecharts,
    lookview,
  },

  data() {
    return {
      time: null,
      isbool: false,
      data: [],
      echartsObj: [],
      isShow: false,
      tableData: [],
    }
  },
  mounted() {
    this.getindex()
    this.getconfig()
    this.time = setInterval(() => {
      this.getconfig()
    }, 20000)
  },
  beforeDestroy() {
    clearInterval(this.time)
  },
  methods: {
    handleDelete(item) {
      getdelete({
        id: item.id,
      }).then((res) => {
        if (res.data.code == 200) {
          this.$message.success(res.data.msg)
          this.getindex()
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    handlecreate() {
      this.isbool = true
      this.$nextTick(() => {
        this.$refs.lookviewRef.createdialogFun()
      })
    },
    handleUpdate(item) {
      this.isbool = true
      this.$nextTick(() => {
        this.$refs.lookviewRef.updatedialogFun(item)
      })
    },
    offdialogVisible(item) {
      console.log(item);
      if (item == '取消') {
        this.isbool = false
      } else if (item == '确定') {
        this.isbool = false
        this.getindex()
      }
    },
    getindex() {
      this.data = []
      sparkNodeList().then((res) => {
        // console.log(res.data.node.length, 'length')
        // this.data.push(res.data.node.slave1)
        // this.data.push(res.data.node.slave2)
        // this.data.push(res.data.node.slave3)
        this.data = res.data.data
        // for (let key in res.data.node) {
        //   if (key == 'master') {
        //     this.data.push(res.data.node.master)
        //   } else if (key == 'master1') {
        //     this.data.push(res.data.node.master)
        //   } else if (key == 'master2') {
        //     this.data.push(res.data.node.master)
        //   } else {
        //     this.data.push(res.data.node[key])
        //   }
        // }
        console.log(this.data)
      })
    },
    getconfig() {
      getsparkList().then((res) => {
        this.echartsObj = res.data.stringObjectHashMap.serverSourceRunLogs
        this.isShow = true
      })
    },
  },
}
</script>
<style scoped></style>
